<template>
	<div class="resource-list">
		<el-card class="box-card">
			<div class="clearfix">
				<el-form
					ref="form"
					:inline="true"
					:model="form"
					class="demo-form-inline"
				>
					<el-form-item prop="name" label="资源名称">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item prop="url" label="资源路径">
						<el-input v-model="form.url"></el-input>
					</el-form-item>
					<el-form-item prop="categoryId" label="资源分类">
						<el-select v-model="form.categoryId" clearable placeholder="全部">
							<el-option
								v-for="item in resourceCategories"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button :disabled="loading" type="primary" @click="onSubmit">查询</el-button>
						<el-button :disabled="loading" @click="onReset">重置</el-button>
						<el-button type="success" @click="add">添加</el-button>
						<el-button @click="$router.push({ name: 'resource-category' })">资源分类</el-button>
					</el-form-item>
				</el-form>
			</div>

			<el-table
				border
				v-loading="loading"
				:data="resource"
				style="width: 100%; margin-bottom: 20px"
			>
				<el-table-column label="编号" min-width="100px" type="index">
				</el-table-column>
				<el-table-column prop="name" label="资源名称" min-width="150px">
				</el-table-column>
				<el-table-column prop="url" label="资源路径" min-width="150px">
				</el-table-column>
				<el-table-column prop="description" label="描述" min-width="150px">
				</el-table-column>
				<el-table-column prop="createdTime" label="添加时间" min-width="150px">
					<template slot-scope="scope">
						<span>{{ scope.row.createdTime | date }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作" min-width="100">
					<template slot-scope="scope">
						<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:disabled="loading"
				:current-page.sync="form.current"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="form.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalCount"
			>
			</el-pagination>
		</el-card>
		<createOrEdit
			:dialogVisible="dialogVisible"
			:resource="resourceItem"
			@close="dialogVisible = false"
			@submit="dialogSubmit"
		></createOrEdit>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import {
  getResourcePages,
  deteleResource,
  saveOrUpdate,
  SaveOrUpdateInter
} from '@/services/resource.ts'
import { getResourceCategories } from '@/services/recourse-category'
import { Form } from 'element-ui'
import createOrEdit from './createOrEdit.vue'

export default Vue.extend({
  name: 'ResourceList',
  components: {
    createOrEdit
  },
  data () {
    return {
      resource: [],
      form: {
        name: '',
        url: '',
        categoryId: null,
        current: 1,
        size: 10
      },
      totalCount: 0,
      resourceCategories: [],
      loading: true,
      dialogVisible: false,
      resourceItem: {}
    }
  },
  created () {
    this.loadResource()
    this.loadResourceCategorys()
  },
  methods: {
    async loadResourceCategorys () {
      const { data } = await getResourceCategories()
      if (data.code === '000000') {
        this.resourceCategories = data.data
      }
    },
    onSubmit () {
      this.form.current = 1
      this.loadResource()
    },
    onReset () {
      (this.$refs.form as Form).resetFields()
      this.form.current = 1
      this.loadResource()
    },
    async loadResource () {
      this.loading = true
      const { data } = await getResourcePages(this.form)
      if (data.code === '000000') {
        this.resource = data.data.records
        this.totalCount = data.data.total
        this.loading = false
      }
    },
    handleEdit (item: object) {
      this.resourceItem = item
      this.dialogVisible = true
    },
    handleDelete (item: { id: number }) {
      this.$confirm('是否要删除该资源?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { data } = await deteleResource(item.id)
        if (data.code === '000000') {
          this.$message.success('删除成功')
          this.loadResource()
        }
      })
    },
    handleSizeChange (val: number) {
      this.form.size = val
      this.form.current = 1
      this.loadResource()
    },
    handleCurrentChange (val: number) {
      this.form.current = val
      this.loadResource()
    },
    add () {
      this.resourceItem = {}
      this.dialogVisible = true
    },
    dialogSubmit (obj: SaveOrUpdateInter) {
      this.saveOrUpdate(obj)
    },
    async saveOrUpdate (params: SaveOrUpdateInter) {
      this.dialogVisible = false
      const { data } = await saveOrUpdate(params)
      if (data.code === '000000') {
        this.$message.success('操作成功')
      }
      this.form.current = 1
      this.loadResource()
    }
  }
})
</script>

<style lang="sass" scoped></style>
